<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        Vue中有2中数据绑定方式：
            1、单项数据绑定(v-bind):数据只能从data流向页面
            2、双向数据绑定(v-model):数据不仅能动data流向页面，还可以从页面流向data。
                备注：
                    1、 v-model 一般都应用在表单类元素上(输入类元素。input、texture、select等)
                    2、v-model:value 可以简写成v-model 。因为v-model 默认手机的就是value值
     -->
    <div class="app">
        <div>单向数据绑定：<input type="text" :value="name"></input></div>
        <div>双向数据绑定：<input type="text" v-model="name"></input></div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '.app',//document.getElementById('app')
            data: {
                name: 'Fairy'
            },
            methods: {

            },
        })
    </script>
</body>

</html>